    <!-- 请假详情 -->
<template>
  <div class="lea-detail">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow" :isRightShow="isRightShow"></top-header>
    <!-- 中间内容部分 -->
    <van-cell-group>
      <!-- <van-cell title="申请人:" :value="list.proName" /> -->
      <van-cell title="职务代理人:" :value="list.depName" />
      <van-cell title="请假开始时间:" :value="list.leaveBeginDate" />
      <van-cell title="请假结束时间:" :value="list.leaveEndDate" />
      <van-cell title="请假类型:" :value="list.leaveTypeName" />
      <van-cell title="事由:" :value="list.detailReason" />
      <van-cell title="备注:" :value="list.remark" />
    </van-cell-group>
    <!-- 底部按键 -->
    <div class="task-btn" v-if="isShow">
      <!-- 修改请假按钮 -->
      <van-button type="info" size="small" block color="burlywood" @click="onAmend" v-if="this.list.isChecked ==='未通过'" style="margin: 0 10px 0 10px;">修改请假</van-button>
      <!-- 删除请假按钮 -->
      <van-button type="info" size="small" block color="burlywood" @click="onDel" v-if="this.list.isChecked ==='未通过'" style="margin-right: 10px;">删除请假</van-button>
      <!-- 打印按钮 -->
      <van-button :loading="isLoading" type="info" size="small" color="burlywood" style="width: 90%;margin-right: 10px" @click="onPrintTask">打印</van-button>
    </div>
    <!-- 弹出层 -->
    <!-- 修改弹出层 -->
    <div class="amend">
      <!-- 修改表单的弹出层 -->
      <van-popup v-model="showAmend" position="bottom">
        <!-- 修改请假表单 -->
        <van-form @submit="onSubmit">
          <van-field
          readonly
          clickable
          :value="amendList.depName"
          name="depName"
          label="职位代理人:"
          placeholder="点击修改职业代理人"
          @click="showDeputy" />
          <van-field
            readonly
            clickable
            name="beginDate"
            :value="amendList.leaveBegin"
            label="开始日期"
            placeholder="点击修改开始日期"
            @click="showCalendar1 = true"
          />
          <van-field
            readonly
            clickable
            name="beginTime"
            :value="amendList.leaveBeginTime"
            label="开始时间"
            placeholder="点击修改开始时间"
            @click="showTimePicker1 = true"
          />
          <van-field
            readonly
            clickable
            name="endDate"
            :value="amendList.leaveEnd"
            label="结束日期"
            placeholder="点击修改结束日期"
            @click="showCalendar2 = true"
          />
          <van-field
            readonly
            clickable
            name="endTime"
            :value="amendList.leaveEndTime"
            label="结束时间"
            placeholder="点击修改结束时间"
            @click="showTimePicker2 = true"
          />
          <van-field name="leaveType" label="请假类型:">
            <template #input>
              <van-checkbox-group v-model="amendList.leaveType" :max="3">
                <van-checkbox
                  v-for="item in GetLeaveType"
                  :key="item.typeId"
                  :name="item.typeId"
                  checked-color="burlywood"
                  :style="{ marginBottom: '4px' }">{{ item.typeName }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field v-model="amendList.detailReason" label="事由:" name="detailReason" type="textarea" maxlength="30" show-word-limit />
          <van-field v-model="amendList.remark" label="备注:" name="remark" type="textarea" maxlength="30" show-word-limit />
          <div class="edit-btn">
            <van-button block size="small" type="info" color="burlywood" native-type="submit">提交修改</van-button>
          </div>
        </van-form>
    </van-popup>
    </div>
    <!-- 日期选择器 -->
    <van-calendar v-model="showCalendar1" @confirm="selectDate1" color="burlywood" />
    <van-calendar v-model="showCalendar2" @confirm="selectDate2" color="burlywood" />
    <!-- 时间选择器1 -->
    <van-popup v-model="showTimePicker1" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="timeOnConfirm1"
        @cancel="showTimePicker = false"
      />
    </van-popup>
    <!-- 时间选择器2 -->
    <van-popup v-model="showTimePicker2" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="timeOnConfirm2"
        @cancel="showTimePicker = false"
      />
    </van-popup>
    <!-- 代理人选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="peoColumns"
        @confirm="peoOnConfirm"
        @cancel="showPicker = false"
        v-if="peoColumns.length > 0"
      />
      <van-empty description="暂无数据" v-else />
    </van-popup>

  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { AddStaffAPILeave, getPeoList, GetLeaveType, DeleteStaffAPILeave, getStaffAPILeave, PrintLeaveTask } from '@/request/api'
import dayjs from 'dayjs'

export default {
  name: 'LeaDetail',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      isRightShow: true,
      loading: false,
      finished: false,
      serCount: 0, // 我的请假数据总量
      pageIndex: 0,
      list: [], // 请假详情数据
      userId: sessionStorage.getItem('userId'), // 用户id
      userName: sessionStorage.getItem('userName'), // 用户名字
      power: sessionStorage.getItem('power'), // 用户权限
      formId: JSON.parse(sessionStorage.getItem('FORM_ID')), // form表单Id
      showAmend: false, // 修改请假弹出层状态
      peoColumns: [], // 代理人选择器数据
      showPicker: false, // 代理人员选择器是否显示
      amendList: {
        // depName: '', // 职位代理人名字
        // leaveBeginDate: '', // 请假开始日期
        // leaveBeginTime: '', // 请假开始时间
        // leaveEndDate: '', // 请假结束日期
        // leaveEndTime: '', // 请假结束时间
        // leaveType: [], // 请假类型
        // detailReason: '', // 事由
        // remark: '' // 备注
      },
      showCalendar1: false, // 日期选择器显示状态
      showCalendar2: false, // 日期选择器显示状态
      showTimePicker1: false, // 时间选择器显示状态
      showTimePicker2: false, // 时间选择器显示状态
      vacType: [], // 请假类型
      GetLeaveType: [], // 请假类型数据
      info: '', // 请假事由
      isShow: true, // 请假详情底部按键显示状态
      aList: { // 要提交的修改数据数据
        formId: '', // 表单Id
        deputy: '', // 职位代理人id
        leaveBegin: '', // 请假开始日期
        leaveBeginTime: '', // 请假开始时间
        leaveEnd: '', // 请假结束日期
        leaveEndTime: '', // 请假结束时间
        leaveType: [], // 请假类型
        detailReason: '', // 事由
        remark: '' // 备注
      },
      isLoading: false // 打印按钮loading
    }
  },
  created () {
    this.list = JSON.parse(sessionStorage.getItem('DATA'))
    this.aList.formId = JSON.parse(sessionStorage.getItem('FORM_ID'))
    // 查询请假类型数据
    GetLeaveType().then(res => {
      console.log(res)
      if (res.Message === '查询成功') {
        this.GetLeaveType = res.Data
      }
    })
    if (this.power === '部门审核人' || this.power === '财务审核人' || this.power === '公司审核人') {
      this.isShow = false
    }
  },
  methods: {
    // 删除按钮触发事件
    onDel () {
      console.log('删除')
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要删除吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        const param = { 'formId': this.formId }
        DeleteStaffAPILeave(param).then(res => {
          console.log(res)
          this.$router.push({ path: '/Myleave' })
        })
      })
    },
    // 点击修改请假按钮
    onAmend () {
      this.showAmend = true
      const param = { 'Id': this.userId, 'formId': this.formId, 'page': this.pageIndex, 'pageCount': 10 }
      // 获取我的请假列表数据
      getStaffAPILeave(param).then(res => {
        console.log(res.Data[0])
        this.amendList = res.Data[0]
      })
    },
    // 点击代理人员选择
    showDeputy () {
      this.getPeo()
      this.showPicker = true
    },
    // 获取代理人数据
    getPeo () {
      this.peoColumns = []
      const param = { 'stype': 'skills', page: 0, pageCount: 100 }
      getPeoList(param).then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.peoColumns = res.result.peo.map(item => {
            return {
              text: item.Source_Name,
              value: item.Source_Id
            }
          })
        }
      })
    },
    // 代理人员选择器
    peoOnConfirm (value) {
      if (value) {
        console.log(value)
        this.amendList.depName = value.text
        this.aList.deputy = value.value
        this.showPicker = false
      }
    },
    // 日期选择器1
    selectDate1 (date) {
      this.showCalendar1 = false
      this.amendList.leaveBegin = dayjs(date).format('YYYY-MM-DD')
    },
    // 时间选择器1
    timeOnConfirm1 (time) {
      this.showTimePicker1 = false
      this.amendList.leaveBeginTime = time
    },
    // 日期选择器2
    selectDate2 (date) {
      this.showCalendar2 = false
      this.amendList.leaveEnd = dayjs(date).format('YYYY-MM-DD')
    },
    // 时间选择器2
    timeOnConfirm2 (time) {
      this.showTimePicker2 = false
      this.amendList.leaveEndTime = time
    },
    // 修改请假提交事件
    onSubmit (values) {
      console.log(values)
      if (values) {
        if (values.depName && values.beginDate && values.beginTime && values.endDate && values.endTime && values.leaveType.length > 0) {
          this.$dialog.confirm({
            title: '提示',
            message: '您确定要提交吗?',
            confirmButtonColor: 'burlywood'
          }).then(() => {
            this.list = this.amendList
            sessionStorage.setItem('DATA', JSON.stringify(this.amendList))
            // 这段代码可以进一步优化吗
            this.aList.leaveBeginDate = values.beginDate
            this.aList.leaveBeginTime = values.beginTime
            this.aList.leaveEndDate = values.endDate
            this.aList.leaveEndTime = values.endTime
            this.aList.leaveType = values.leaveType
            this.aList.remark = values.remark
            this.aList.detailReason = values.detailReason
            console.log(this.aList)
            AddStaffAPILeave(this.aList).then(res => {
              console.log(res)
              if (res.Tag === 1) {
                console.log('修改成功')
                this.$toast('修改成功')
                this.$router.push({ path: '/MyLeave' })
              } else {
                this.$toast.fail('提交失败')
              }
            })
          }).catch(() => {})
        } else {
          this.$dialog.alert({
            message: '职位代理人,开始/结束日期,开始/结束时间,请假类型必填',
            confirmButtonColor: 'burlywood'
          })
        }
      } else {
        this.$dialog.alert({
          message: '申请人错误',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 打印按键触发事件
    onPrintTask () {
      this.isLoading = true
      const param = {
        id: this.list.id
      }
      PrintLeaveTask(param).then(res => {
        if (res.Tag === 1) {
          this.isLoading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .lea-detail {
    width: 100%;
    height: 100%;
    .van-cell-group {
      &::after {
        border: none;
      }
      .van-cell {
        .van-cell__value {
          flex: 2;
          text-align: left;
        }
      }
    }
    .task-btn {
      width: 100%;
      height: 1.4rem;
      background-color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 0;
      // .van-button {
      //   width: 30%;
      // }
    }
    .amend {
      .van-popup {
        height: 70%;
        .van-form {
          .edit-btn {
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            .van-button {
              width: 90%;
            }
          }
        }
      }
    }
}
</style>
